<script>
    import MusicList from '@/components/MusicList.vue'

    export default {
        name: 'PlayList',
        data() {
            return {
                name: '', // 歌单名称
                imgUrl: '', // 歌单封面图片
                list: [], // 歌曲列表
            }
        },
        props: ['id'],
        components: {
            MusicList
        },
        // 生命周期
        created() {
            this.musicplaylist();
        },
        methods: {
            async musicplaylist() {
                let res = await this.$api.musicplaylist();
                console.log('歌曲信息', res.data);
                this.name = res.data.playlist.name;
                this.imgUrl = res.data.playlist.coverImgUrl;
                this.list = res.data.playlist.tracks;
            }
        }
    }
</script>

<template>
    <div>
        <div class="mark">播放界面id：{{ id }}</div>
        <!--信息头像-->
        <div class="info">
            <img :src="imgUrl" alt="">
            <div class="name">{{ name }}</div>
        </div>
        <!--歌曲列表-->
        <div class="content">
            <div class="desc">
                歌曲列表
            </div>
            <MusicList :list="list">
                <template v-slot:code="obj">
                    <div class="code">
                        {{ obj.index + 1 }}
                    </div>
                </template>
            </MusicList>
            <!--<div class="list" v-for="(item, index) in list" :key="item.id">-->
            <!--    <div class="code" :class="{ 'code-red' : index < 3 }">{{ index + 1 }}-->
            <!--    </div>-->
            <!--    <div class="list-item">-->
            <!--        <div class="left">-->
            <!--            <div class="subtitle">{{ item.name }} <span>{{ item.alia[0] }}</span></div>-->
            <!--            <div class="author">-->
            <!--            <span v-for="ele in item.ar" :key="ele.id" class="ele">-->
            <!--                {{ ele.name }}-->
            <!--            </span>-->
            <!--                - {{ item.al.name }}-->
            <!--            </div>-->
            <!--        </div>-->
            <!--        <div class="right">-->
            <!--            aa-->
            <!--        </div>-->
            <!--    </div>-->
            <!--</div>-->
        </div>
    </div>
</template>

<style scoped lang="less">
    .info {
        padding: 0.3rem;
        background-color: #eeeeee;
        display: flex;

        img {
            width: 2.5rem;
        }

        .name {
            flex: 1;
            padding-left: 0.2rem;
        }
    }

    .content {
        .desc {
            color: #888888;
            font-size: 12px;
            padding: 0.1rem;
            background-color: #dddddd;
        }

        //.list {
        //    display: flex;
        //
        //    .code {
        //        width: 1rem;
        //        text-align: center;
        //        display: flex;
        //        align-items: center;
        //        justify-content: center;
        //        font-size: 16px;
        //    }
        //
        //    .code-red {
        //        color: #df3436;
        //    }
        //
        //    .list-item {
        //        border-bottom: 1px solid #eeeeee;
        //        padding-left: 10px;
        //        padding-top: 6px;
        //        padding-bottom: 6px;
        //        display: flex;
        //        flex: 1;
        //
        //        .left {
        //            flex: 1;
        //            width: 5.5rem;
        //            overflow: hidden;
        //            text-overflow: ellipsis;
        //            white-space: nowrap;
        //            word-break: normal;
        //
        //            .subtitle {
        //                font-size: 17px;
        //                overflow: hidden;
        //                color: #333333;
        //                text-overflow: ellipsis;
        //                white-space: nowrap;
        //                word-break: normal;
        //
        //                span {
        //                    //font-size: 12px;
        //                    color: #888888;
        //                }
        //            }
        //
        //            .author {
        //                margin-top: 4px;
        //                font-size: 12px;
        //                color: #888888;
        //                overflow: hidden;
        //                text-overflow: ellipsis;
        //                white-space: nowrap;
        //                word-break: normal;
        //
        //                .ele {
        //                    &::after {
        //                        content: '/';
        //                    }
        //                }
        //
        //                .ele:last-child {
        //                    &::after {
        //                        content: '';
        //                    }
        //                }
        //            }
        //        }
        //
        //        .right {
        //            width: 0.9rem;
        //        }
        //    }
        //}
    }
</style>